    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>中超固定导航栏</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
           #top1{
           padding-left: 50px;
           }
            #nav{
                padding-left: 51px;

            }
            #main{
                padding-left: 262px;
            }
            .fixed {
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
        <script src="../公共函数.js"></script>
    </head>
    <body>
    <div id="top1"><img src="imgs/top.png" alt=""></div>
    <div id="nav"><img src="imgs/nav.png" alt=""></div>
    <div id="main"><img src="imgs/main.png" alt=""></div>
    <script>
        var top1=document.getElementById('top1');
        var nav=document.getElementById('nav');
        var main=document.getElementById('main');
    window.onscroll=function () {
    if (scroll().top>=top1.offsetHeight){
        nav.className="fixed";
    }else{
        nav.className = "";
    }
    }

    </script>
    </body>
    </html>